<template>
  <!-- 查看安全之星和工匠之星信息 -->
  <base-breadcrumb>
    <div class="page-body">
      <a-card :bordered="false">
        <title-name title="信息详情" />
        <a-spin :spinning="loading">
          <custom-form :formList="formList" isValidate :form="form" editModel="V"></custom-form>
        </a-spin>
      </a-card>
      <a-card :bordered="false">
        <title-name title="获奖记录" />
        <s-table
          ref="table"
          size="default"
          rowKey="key"
          :columns="columns"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :showPagination="false"
        >
          <!-- 照片 -->
          <template slot="fileArrays" slot-scope="text, record">
            <l-table
              v-if="record.fileArrays && record.fileArrays.length > 0"
              uploadType="image"
              :disabled="true"
              :editModel="0"
              :uploadArrys.sync="record.fileArrays"
              multiple
            ></l-table>
            <span v-else>无</span>
          </template>
        </s-table>
      </a-card>
      <!-- 页脚操作栏 -->
      <div
        class="btn_box page-btn-right-top"
      >
        <a-button type="primary" @click="$multiTab.close()">关闭</a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import { star } from '@/api/quality/quality' // api
import Template from '@/views/construction/gantt/template.vue'

export default {
  name: 'a' + Date.now(),
  extends: new BaseEditPage(),
  components: {
    STable,
    Template
  },
  data() {
    return {
      formList: [
        {
          keyName: 'starCategoryTypeText',
          label: '工匠之星目标类别'
        },
        {
          keyName: 'employeeName',
          label: '姓名'
        },
        {
          keyName: 'sex',
          label: '性别'
        },
        {
          keyName: 'idCard',
          label: '身份证号'
        },
        {
          keyName: 'phoneNum',
          label: '联系电话'
        },
        {
          keyName: 'birthday',
          label: '出生日期'
        },
        {
          keyName: 'rewardCount',
          label: '获奖次数'
        },
        {
          keyName: 'viewName',
          label: '所属单位',
          span: 16
        },
        // {
        //   keyName: 'branchCompanyName',
        //   label: '所属分公司'
        // },
        // {
        //   keyName: 'projectName',
        //   label: '所属项目'
        // },
        {
          keyName: 'subcontractorName',
          label: '当前所属分包'
        },
      ], // 表单列表
      form: {}, // 表单
      loadData: () => {
        return star.records({ starType: 1, employeeId: this.employeeId, qualityStarTypeId: this.type , ...this.$route.params}).then((res) => {
          if (res) {
            res.data?.forEach((item, index) => {
              item.key = index + 1
            })
            !this.form.rewardCount && this.$set(this.form, 'rewardCount', res.data?.length || 0)
            return res
          }
        })
      },
      loading: false //加载控件
    }
  },
  computed: {
    // 表头
    columns() {
      let columns = [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          customRender() {
            return arguments[2] + 1
          }
        },
        {
          title: '发放时间',
          dataIndex: 'createTime'
        },
        {
          title: '发放人',
          dataIndex: 'issuer',
          ellipsis: true
        },
        {
          title: '施工区域',
          dataIndex: 'respArea',
          ellipsis: true
        }
      ]
      if (this.type === '727821124189134526') {
        columns.push(
          {
            title: '表彰卡编号',
            dataIndex: 'cardNum',
            ellipsis: true
          },
          {
            title: '表彰卡面额',
            dataIndex: 'cardValue'
          }
        )
      } else {
        columns.push({
          title: '奖励金额',
          dataIndex: 'rewardValue',
          ellipsis: true,
          customRender(e) {
            return e ? e + '元' : ''
          }
        })
      }
      return [
        ...columns,
        {
          title: '获奖理由',
          dataIndex: 'rewardReasons',
          ellipsis: true
        },
        {
          title: '照片',
          dataIndex: 'fileArrays',
          scopedSlots: { customRender: 'fileArrays' }
        },
        {
          title: '备注',
          dataIndex: 'remark',
          ellipsis: true
        } // 表头
      ]
    }
  },
  created() {
    this.loading = true
    star
      .getDetail({ id: this.id })
      .then((res) => {
        if(this.$refs.table?.localDataSource?.length){
          res.data.rewardCount = this.$refs.table.localDataSource.length
        }
        this.form = res.data
        this.form.viewName = this.form.branchCompanyName + '/' + this.form.projectName
      })
      .finally(() => {
        this.loading = false
      })
  }
}
</script>

<style>
</style>
